<!DOCTYPE html>  
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no" />
<title>liveBoard v0.1</title>  

<link rel="stylesheet" href="css/common.css" type="text/css" /> 
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" /> 
<link rel="stylesheet" type="text/css" href="css/ui-darkness/jquery-ui-1.8.4.custom.css" />

<style>
  /*
  #sharecontacts {
    overflow: auto;
    height: 350px;
  }
  #contacts {
    width: 600px;
    height: 300px;
    overflow: auto;
  }
  */
  #selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#selectable li { margin: 3px; padding: 0.2em; font-size: 1em; height: 12px; }
  
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="ui.multiselect.js"></script>

<script language="javascript" type="text/javascript">

  var jsonstr = '{"msg": "Success", "data": [{"name": "vinod alva", "email": "alvicon@hotmail.com"}, {"name": null, "email": "arvindbhai39@caltiger.com"}, {"name": "yogesh chopra", "email": "yogic@hotmail.com"}, {"name": "p d", "email": "pddeals@yahoo.com"}, {"name": "Nimish Danani", "email": "ndanani@giasbma.vsnl.net.in"}, {"name": "Amit J Desai", "email": "amit.desai.b@bayer.com"}, {"name": "Amit Desai", "email": "ajdesai@indiatimes.com"}, {"name": "Darshin Desai", "email": "darshind@yahoo.com"}, {"name": "Hitesh R Desai", "email": "hiteshnim@yahoo.com"}, {"name": "Pranav Desai", "email": "pranavadesai@yahoo.com"}, {"name": "pratik desai", "email": "pratikrdesai@yahoo.com"}, {"name": "Purav Desai", "email": "puravbdesai@yahoo.com"}, {"name": "Rajesh Desai", "email": "rajeshcdesai@yahoo.com"}, {"name": "umesh desai", "email": "umeshd@glenmarkindia.com"}, {"name": "viral desai", "email": "desaiviral_v1@rediffmail.com"}, {"name": "Eastwood Cougars", "email": "eastwoodcougars@egroups.com"}, {"name": "Sameer Ghate", "email": "sameerghate@hotmail.com"}, {"name": "spce grp", "email": "SPCEgrp@yahoogroups.com"}, {"name": "Cyrus Jamula", "email": "jamula@usc.edu"}, {"name": "Jyoti", "email": "jyoti_a@hotmail.com"}, {"name": "Uday Kale", "email": "udayk@informix.com"}, {"name": "Rishikesh Kamat", "email": "astrorishi@yahoo.com"}, {"name": "Prasanna Karhade", "email": "prasanna78@yahoo.com"}, {"name": "Aniket Khosla", "email": "aniketkh@usc.edu"}]}';

$(function() {
   $("#submit").button();
   $("#submit").bind('click', submit);
   $("#share").button();
   $("#share").bind('click', share);
   $( "#sharedialog" ).dialog({autoOpen: false});
   fetch();
});

function fetch() {
  var obj = JSON.parse(jsonstr);
  var str = '';
  if(obj.msg === "Success") {
    //str = '<select id="contacts" class="multiselect" multiple="multiple" name="contacts[]">';
    
    for(i=0; i<obj.data.length; i++) {
      str += '<option value=' + obj.data[i].email + '>' + 
              obj.data[i].name + '</option>';
    }
    //str += '</select>';

    $("#contacts").html(str);
    $("#sharemsg").html("Please login to share this session.");
    $("#shareform").show();
    $(".multiselect").multiselect();
    /*
    */
    $("#sharedialog").dialog({
      resizable: false,
      draggable: false,
      width:640,
      modal: true,
      buttons: {
        "Submit": submit,
        "Cancel": function() { $(this).dialog("close"); }
      }
    });
  }
}

function submit() {
  var i = 0;
  var str = '';
  var obj = new Object();
  var selected = [];
  for(i=0; i<contacts.length; i++) {
    if(contacts[i].selected === true) {
      str += contacts[i].value + " ";
      selected.push(contacts[i].value);
    }
  }
  obj.contacts = selected;
  obj.link = "gid=2345";

  $.ajax({
    type: "POST",
    url: "/sharereq",
    cache: false,
    data: JSON.stringify(obj),
    success: function(data) {
      alert("success " + data);
    },
    error: function(error) {
      alert("fail " + error);
    }
  });
}

function share() {
    $("#sharedialog").dialog("open");
}

function fetch2() {
  var obj = JSON.parse(jsonstr);
  if(obj.msg === "Success") {
    str = '<ol id="selectable">';
    for(i=0; i<obj.data.length; i++) {
      str += '<li class="ui-widget-content">' + 
              obj.data[i].name + '</li>';
    }
    str += '</ol>';

    $("#sharecontacts").html(str);
    $( "#selectable" ).selectable();
  }
}
</script>

<div id="sharedialog">
  <div id="shareform">
  Please enter your username
  <input type="text" id="susername" autocorrect="off" autocapitalize="off"></input>
  </div>
  <div id="sharecontacts" style="width: 600px; height: 300px;">
    <select id="contacts" class="multiselect" multiple="multiple" name="contacts[]">'
    <select>
  </div>
  <div id="sharemsg">
    <button id="submit">Submit</button>
  </div>
</div>
<button id="share">Share</button>
</body>
</html>
